<template>
  <div :class="{demo:demoName}" style="border: 1px solid #DCDFE6;border-bottom: none">
    <component :is="component"/>
  </div>
  <template v-if="demoName">
    <PcCollapse :data="data">
      <template #label="item">
        {{ item.openStatus ? '隐藏' : '查看' }}代码
      </template>
      <template #default>
        <pre v-html="codeHtml"></pre>
      </template>
    </PcCollapse>
  </template>
</template>

<script lang="ts" setup>
import {ref, onMounted, computed} from 'vue';
import 'prismjs';
import 'prismjs/themes/prism.css';
import PcCollapse from "../../packages/components/collapse/index.vue";

const data = ref([{label: '', style: {justifyContent: 'center'}}])
const Prism = (window as any).Prism;

const props = defineProps(({
  component: Object,
  componentName: String,
  demoName: String
}))

const codeResourc = ref('');
const isDev = import.meta.env.MODE;
const getCode = async () => {
  if (isDev === 'development') {
    codeResourc.value = (await import(/* @vite-ignore */ `../views/document/${props.componentName}/${props.demoName}.vue?raw`)).default;
  } else {
    codeResourc.value = await fetch(`src/views/document/${props.componentName}/${props.demoName}.vue`).then((res) => res.text())
  }
}

onMounted(() => {
  if (props.demoName) {
    getCode()
  }
})

const codeHtml = computed(() => {
  return Prism.highlight(codeResourc.value, Prism.languages.html, 'html')
})
</script>

<style lang="scss" scoped>
.btn-view {
  padding: 6px;
  text-align: right;
  border-top: 1px solid #DCDFE6;
  position: relative;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    bottom: -1px;
    background: #DCDFE6;
    z-index: 1;
  }
}

.code-view {
  text-align: left;
  padding: 0 10px;
  background: #F5F7FA;
  position: relative;
  height: 0;
  transition: height 0.5s ease;
  overflow: hidden;
  box-sizing: border-box;

  &:after {
    content: 'vue';
    position: absolute;
    top: 0;
    right: 6px;
    font-size: 12px;
    color: #A0A2A5;
  }
}
</style>
